<template>
  <div class="edit-photo">
    <img :src="imgUrl" ref="img" alt="">
    <div class="tool-bar">
      <span class="btn" @click="$emit('close')">取消</span>
      <span class="btn" @click="submit">完成</span>
    </div>
  </div>
</template>

<script>
import { updateUserPhoto } from '@/api/user'
// 导入裁剪插件的样式和JS文件
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';
  export default {
    name:'EditPhoto',
    data() {
      return {
        cropper: null  // 文件裁剪对象
      }
    },
    props:{
      imgUrl:{
        type:String,
        required:true
      }
    },
    // 挂载成功之后
    mounted(){
      // new Cropper(图片节点,{配置选项})
      this.cropper = new Cropper(this.$refs.img, {
        viewMode: 1,  // 限制裁切框不要超过画布的大小
        dragMode: 'move',  // 移动画布
        aspectRatio: 1,   // 定义裁剪框的固定长宽比
        autoCropArea: 1,   // 0到1之间的数字。定义自动裁剪区域的大小（百分比）
        cropBoxMovable: false,  // 启用通过拖动来移动裁剪框的功能。
        cropBoxResizable: false,  // 启用以通过拖动来调整裁剪框的大小。
        background: false,
        movable: true
      })
    },
    methods: {
      submit() {
        // 生成文件信息
        //  this.cropper.getCroppedCanvas().toBlob(blob=>{ ... })
        this.cropper.getCroppedCanvas().toBlob(async blob=>{
          this.$toast.loading('更新中')
          let fd = new FormData()  // 提交FormData类型数据
          fd.append('photo',blob)
          try {
            const { data:res } = await updateUserPhoto(fd)
            this.$toast.success('更新成功')
            this.$emit('close',res.data.photo)
          } catch (error) {
            this.$toast.fail('更新头像失败')
          }
        })
      }
    },
  }
</script>

<style lang="less" scoped>
.edit-photo{
  height: 100vh;
  img{
    max-width: 100%;
  }
  .tool-bar{
    position:fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    display: flex;
    justify-content: space-between;
    .btn{
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align:center;
      color: #fff;
      font-size: 30px;
    }
  }
}
</style>